import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import { Layout, Input, Table, Button } from 'element-react'
import Select from '../base/Select'
import Pagination from '../base/Pagination'
import styled from 'styled-components'

class sellerList extends Component {
  constructor (props) {
    super(props);
    
    this.state = {
      totalElements: 40,
      itemCat: '',
      itemCatArr: [
        {
          label: '1',
          value: '1'
        }
      ],
      columns: [
        {
          label: "编号",
          prop: "num",
          align: "center"
        },
        {
          label: "店铺名称",
          prop: "shopName",
          align: "center"
        },
        {
          label: "品牌名称",
          prop: "brandName",
          align: "center"
        },
        {
          label: "商品类目",
          prop: "itemCat",
          align: "center"
        },
        {
          label: "店铺类型",
          prop: "shopType",
          align: "center"
        },
        {
          label: "联系电话",
          prop: "phone",
          align: "center"
        },
        {
          label: "操作",
          prop: "operate",
          align: "center",
          render: (row) => {
            return (
              <span>
                <Button type="info" size="small" onClick={this.goDetail.bind(this, row)}>查看</Button>
                <Button type="info" size="small" onClick={this.edit.bind(this, row)}>编辑</Button>
              </span>
            )
          }
        }
      ],
      data: [
        {
          num: '1',
          shopName: '1',
          brandName: '1',
          itemCat: 1,
          shopType: 2,
          phone: '1234567890'
        }
      ]
    } 
  }
  increase () {
    this.props.history.push({
      pathname: '/sellerCreate',
      state: { fromDashboard: true }
    })
  }
  edit (row) {
    let id = 11
    this.props.history.push({
      pathname: `/sellerEdit/${id}`,
      state: { fromDashboard: true }
    })
  }
  goDetail (row) {
    console.log(row)
    this.props.history.push({
      pathname: '/sellerDetail',
      state: { fromDashboard: true }
    })
  }
  changePage () {}
  selectWay (value) {
    this.setState({itemCat: value})
  }
  search () {}
  
  render () {
    const width = {
      width: '100%'
    };
    
    const TableClass = styled.div`
      margin-top: 40px;
    `
    return (
      <div>
        <Breadcrumb data={['商家管理', '商家列表']}/>
        
        <Layout.Row className="inputGroup" gutter="10" type="flex" align="middle">
          <Layout.Col className="inputLabel" span="3">店铺名称：</Layout.Col>
          <Layout.Col span="5"><Input placeholder="请输入店铺名称" size="small" /></Layout.Col>
          <Layout.Col className="inputLabel" span="3" offset="1">品牌名称：</Layout.Col>
          <Layout.Col span="5"><Input placeholder="请输入品牌名称" size="small" /></Layout.Col>
        </Layout.Row>
        <Layout.Row gutter="10" type="flex" align="middle">
          <Layout.Col className="inputLabel" span="3">商品类目：</Layout.Col>
          <Layout.Col span="5"><Select options={this.state.itemCatArr} select={this.selectWay.bind(this)}/></Layout.Col>
          <Layout.Col span="3" offset="13"><Button style={width} type="warning" onClick={this.search.bind(this)}>搜索</Button></Layout.Col>
        </Layout.Row>
        
        <div className="buttonWrap">
          <Button type="warning" onClick={this.increase.bind(this)}>新增</Button>
        </div>
        <Table
          columns={this.state.columns}
          data={this.state.data}
          border={true}
        />
        <Pagination total={this.state.totalElements} changePage={this.changePage.bind(this)}/>
      </div>
    )
  }
}
export default withRouter(sellerList)